<template>
    <form action="/">
        <van-search v-model="value" show-action placeholder="在这里写下你想寻找的" @search="onSearch" @cancel="onCancel" />
    </form>
    <div v-if="ssh">
        <div class="zwm" v-for="(item, index) in ssjg" :key="index" @click="djtzyd(item.content_id)">
            <div>
                <img :src="item.cover" alt="">
            </div>
            <div>
                <div>{{ item.title }}</div>
                <div>{{ item.subtitle }}</div>
            </div>
        </div>
    </div>
    <div v-if="ssh == false" class="lsjl">
        <div v-for="(item,index) in ssls" :key="index" @click="djlsss(item)">{{ item }}</div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { showToast } from 'vant';
import axios from '../plugins/axiosInstance';
import { useRouter } from 'vue-router'
const router = useRouter()
const value = ref('');
const ssjg = ref()
const ssls = ref([])
const ssh = ref(false)
const djlsss = (item) => {
    value.value = item
    onSearch()
}
const onSearch = () => {
    ssh.value = true
    ssls.value.push(value.value)
    localStorage.setItem('sslsjl', JSON.stringify(ssls.value))
    console.log(ssjg);

    axios({
        url: `https://apis.netstart.cn/one/search/reading/${value.value}/0`,
        method: 'get'
    }).then((res) => {
        ssjg.value = res.data.data.list
    }).catch(() => { })
    value.value = ''
};

onMounted(() => {
    ssh.value = false
    if (JSON.parse(localStorage.getItem('sslsjl')) !== null) {
        ssls.value = JSON.parse(localStorage.getItem('sslsjl'))
    }
})

const onCancel = () => history.back();
const djtzyd = (id) => {
    // 获取文章
    let yueduId = localStorage.setItem('yueduId', JSON.stringify(id))
    router.push('/yuedu')
}

</script>

<style lang="less" scoped>
.lsjl{
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    div{
        padding: 0 15px;
        height: 30px;
        border: 1px solid #eeeeee;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 10px;
    }
}
.zwm {
    padding: 10px;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eeeeee;
    display: flex;

    >div:nth-child(1) {
        width: 50px;
        height: 50px;

        img {
            width: 100%;
            object-fit: cover;
            // object-position: center;
            // position: absolute;
            // /* 需要设置绝对定位 */
            // top: 0;
            // left: 0;
        }
    }

    >div:nth-child(2) {
        flex: 1;
        box-sizing: border-box;
        padding-left: 10px;
        display: flex;
        flex-direction: column;

        >div:nth-child(1) {
            flex: 5;
            font-size: 16px;
        }

        >div:nth-child(2) {
            flex: 3;
            font-size: 12px;
            color: #aeaeae;
        }
    }
}
</style>